<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="基于 PDWebpack 的 web 自动化构建手脚架。">
    <meta name="keywords" content="webpack, aout, fybug, web, html, webDev">
    <title>aout.ass</title>
    <link rel="icon" href="./static/img/aout.ass.png">
</head>
<body>

<!-- 顶栏 -->
<header class="shadow"></header>

<!-- 内容部分 -->
<section class="grid-y grid-padding-x off-canvas-content" data-off-canvas-content>
    <!-- 标题区 -->
    <tit class="cell grid-y align-center shadow flutitle">
        <div class="cell grid-x text-center">
            <!-- 标题 -->
            <div class="cell">
                <img src="./static/img/aout.ass.png" alt="icon"/>
                <h4 class="cell font-bold font-wide">aout.ass</h4>
                <!-- 简介 -->
                <h3 class="margin-vertical-1 cell">基于 <a href="./PDWebpack.html" target="_blank"
                                                         style="color: #fff;text-decoration: underline;">PDWebpack</a>
                    的 web 自动化构建手脚架。</h3>
            </div>

            <!-- 按钮 -->
            <div class="cell button-group no-gaps margin-top-1 align-center hollow">
                <a class="button padding-vertical-1 padding-horizontal-2" target="_blank"
                   href="https://gitee.com/fybug/aout.ass"
                   style="border-radius: 999rem 0 0 999rem">
                    <h5 class="margin-bottom-0">gitee</h5></a>
                <a class="button padding-vertical-1 padding-horizontal-2" target="_blank"
                   href="https://github.com/fybug/aout.ass"
                   style="border-radius: 0 9999rem 9999rem 0">
                    <h5 class="margin-0">github</h5></a>
            </div>
        </div>
    </tit>

    <!-- 特性 -->
    <section class="cell grid-y align-center" id="texing">
        <!-- 小屏幕设备 -->
        <section role="region" data-orbit margin="horizontal"
                 class="cell hide-for-medium orbit margin-vertical-3 padding-vertical-2 padding-horizontal-1">
            <div class="orbit-wrapper">

                <!-- 幻灯片 -->
                <ul class="orbit-container grid-y align-center">
                    <!-- 按钮 -->
                    <li class="orbit-controls">
                        <button class="orbit-previous">
                            <span class="show-for-sr">上一个介绍</span>
                            <i class="fa fa-chevron-left fa-2x"></i>
                        </button>
                        <button class="orbit-next">
                            <span class="show-for-sr">下一个介绍</span>
                            <i class="fa fa-chevron-right fa-2x"></i>
                        </button>
                    </li>

                    <li class="orbit-slide is-active cell">
                        <div>
                            <div class="text-center">
                                <h1><i class="fa-2x fa fa-rocket"></i></h1>
                                <h1>即刻使用</h1>
                            </div>
                            <p>clone 项目即可开始使用此手脚架。</p>
                        </div>
                    </li>
                    <li class="orbit-slide cell">
                        <div>
                            <div class="text-center">
                                <h1><i class="fa-2x fa fa-legal"></i></h1>
                                <h1>规范化目录</h1>
                            </div>
                            <p>按照页面区分的目录结构，规范后协作更容易。</p>
                        </div>
                    </li>
                    <li class="orbit-slide cell">
                        <div>
                            <div class="text-center">
                                <h1><i class="fa-2x fa fa-tasks"></i></h1>
                                <h1>自动化</h1>
                            </div>
                            <p>根据 <b>目录结构规范</b> 自动扫描并打包项目。</p>
                        </div>
                    </li>
                    <li class="orbit-slide cell">
                        <div>
                            <div class="text-center">
                                <h1><i class="fa-2x fa fa-code-fork"></i></h1>
                                <h1>前缀控制</h1>
                            </div>
                            <p>根据 <code>[index]_[name]_[mode].js</code> 的方式在命名上即可指定加载顺序和模式。</p>
                        </div>
                    </li>
                </ul>

            </div>
        </section>

        <!-- 大屏幕设备 -->
        <section class="cell grid-x align-center grid-container show-for-medium">
            <div class="cell medium-6 large-3">
                <div class="text-center">
                    <h3><i class="fa-2x fa fa-rocket"></i></h3>
                    <h3>即刻使用</h3>
                </div>
                <p>clone 项目即可开始使用此手脚架。</p>
            </div>
            <div class="cell medium-6 large-3">
                <div class="text-center">
                    <h3><i class="fa-2x fa fa-legal"></i></h3>
                    <h3>规范化目录</h3>
                </div>
                <p>按照页面区分的目录结构，规范后协作更容易。</p>
            </div>
            <div class="cell show-for-medium-only padding-vertical-1"></div>
            <div class="cell medium-6 large-3">
                <div class="text-center">
                    <h3><i class="fa-2x fa fa-tasks"></i></h3>
                    <h3>自动化</h3>
                </div>
                <p>根据 <b>目录结构规范</b> 自动扫描并打包项目。</p>
            </div>
            <div class="cell medium-6 large-3">
                <div class="text-center">
                    <h3><i class="fa-2x fa fa-code-fork"></i></h3>
                    <h3>前缀控制</h3>
                </div>
                <p>根据 <code>[index]_[name]_[mode].js</code> 的方式在命名上即可指定加载顺序和模式。</p>
            </div>
        </section>
    </section>
    <hr class="cell"/>

    <!-- 使用方法 -->
    <section class="cell grid-y align-center">
        <section id="users"
                 class="cell grid-y align-center grid-container padding-vertical-2 padding-horizontal-2">
            <h3>使用</h3>
            <blockquote>安装 Node.js 作为 webpack 的运行环境</blockquote>
            <b>前往 github/gitee 发行版下载源码包或直接 clone 主分支的源码作为项目使用即可</b>
            <p>在项目文件夹下运行
                <code class="code-block"><span style="color: crimson">npm</span> <span
                        style="color:#ff4b00;">-y init</span><br/>
                    <span style="color: crimson">npm</span> <span style="color:#ff4b00;">install --save-dev</span></code>
                初始化项目配置并安装依赖即可开始使用
            </p>
            <p>详细使用请查看 git wiki 文档</p>
            <div class="grid-x align-center text-center button-group">
                <a href="https://gitee.com/fybug/aout.ass/wikis"
                   class="cell small-5 medium-3 padding-vertical-1 button">gitee
                    wiki</a>
                <a href="https://github.com/fybug/aout.ass/wiki"
                   class="cell small-5 medium-3 padding-vertical-1 button">github
                    wiki</a>
            </div>
        </section>
    </section>

</section>

<footer class="grid-y text-center align-center">
    <div class="cell grid-x grid-margin-x align-center">
        <!-- 项目位置连接 -->
        <div class="cell medium-shrink small-12 grid-y align-center">
            <h5 class="cell"><u><a
                    href="https://github.com/fybug">github</a></u>
                / <u><a
                        href="https://gitee.com/fybug">gitee</a></u> @ fybug</h5>
        </div>
        <!-- 说明 -->
        <div class="cell shrink grid-y align-center">
            <p class="cell margin-0">aout.ass by 2020</p>
            <p class="cell margin-0">web code of the 2020</p>
        </div>
    </div>
    <hr class="cell margin-bottom-0"/>
    <h4 class="margin-top-1">使用下列项目搭建</h4>
    <div class="cell grid-x align-center text-center">
        <p class="cell large-2 medium-3">Foundation v6.6.3</p>
        <p class="cell large-2 medium-3">motion-ui v2.0.3</p>
        <p class="cell large-2 medium-3">font-awesome v4.7.0</p>
        <p class="cell large-2 medium-3"><u><a href="https://gitee.com/fybug/aout.ass">aout.ass
            v0.0.1</a></u></p>
        <p class="cell large-2 medium-3"><u><a href="https://gitee.com/fybug/vhannels">vhannels
            v0.0.1</a></u></p>
    </div>
</footer>

</body>
</html>